<template lang="html">
  <div class="group group-comment" v-if="comments">
    <div class="group-head">
      <span class="group-title">
        用户评论（{{ comments.length }}）
      </span>
      <span class="group-more" @click="routeTo('/pingtuan/goods/commentList?goodsId='+$route.query.goodsId)">
        查看全部
        <img  class="max" src="/static/pingtuan/goods/details_icon_arrows_pink@2x.png">
      </span>
    </div>

    <div class="comment-list" v-if="comments.length > 0">
      <div class="comment-content" v-for="comment in comments">
        <p class="comment-name-box">
          <img :src="comment.comment_icon" alt class="comment-headerimg" />
          <span class="comment-name">{{comment.comment_username}}</span>
        </p>
        <p class="comment-time-box">
          <span class="comment-time">{{comment.addtime}}</span>
          <span class="comment-goods">{{comment.goods_name}}</span>
        </p>
        <p class="comment-text">{{comment.content}}</p>
        <ul
          class="comment-img-ul flex-display flex-warp"
          v-if="comment.GoodsComments && comment.GoodsComments.length"
        >
          <li class="comment-img-li" v-for="(item, index) in comment.GoodsComments" :key="index">
            <img :src="item.vectorgraph" />
          </li>
        </ul>
      </div>
    </div>
    <div v-else class="no-comment">
      暂无评论
    </div>
  </div>
</template>

<script>
export default {
  props: ['comments'],
}
</script>

<style lang="scss" scoped>
.pt-goods .group.group-comment .group-head{
  .group-more{
    color: #FF899C;
  }
}
.no-comment{
  text-align: center;
  padding: 1rem 0;
  color: #888;
}

.group-comment{
  .comment-box {
    padding: 15px 12px;

  }
  .comment-content{
    padding-left: .4rem;
    padding-bottom: .4rem;
    border-bottom: 1px solid #eee;
  }
  .comment-title {
    font-size: 14px;
    font-family: SourceHanSansCN-Regular;
    font-weight: 400;
    color: rgba(51, 51, 51, 1);
  }

  .comment-lookall {
    font-size: 14px;
    font-family: SourceHanSansCN-Regular;
    font-weight: 400;
    color: rgba(255, 137, 156, 1);
  }

  .comment-arrow {
    width: 22px;
    height: 22px;
  }

  .comment-content {
    margin-top: 25px;
  }

  .comment-headerimg {
    width: 29px;
    height: 29px;
    border-radius: 3rem;
  }

  .comment-name {
    margin-left: 5px;
    font-size: 14px;
    font-family: SourceHanSansCN-Regular;
    font-weight: 600;
    color: rgba(25, 25, 25, 1);
  }

  .comment-time-box {
    margin-top: 12px;
    font-size: 12px;
    font-family: SourceHanSansCN-Normal;
    font-weight: 400;
    color: rgba(160, 154, 155, 1);
  }

  /* .comment-time {} */

  .comment-goods {
    padding-left: 8px;
  }

  .comment-text {
    margin-top: 12px;
    margin-right: 15px;
    font-size: 13px;
    font-family: SourceHanSansCN-Regular;
    font-weight: 600;
    color: rgba(51, 51, 51, 1);
    line-height: 20px;
  }

  /* .comment-img-ul {} */

  .comment-img-li {
    width: 77px;
    height: 77px;
    margin: 13px 13px 13px 0;
    overflow: hidden;
    position: relative;
  }

  .comment-img-li:nth-of-type(4n) {
    margin-right: 0;
  }

  .comment-img-li img {
    width: 100%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
}

</style>
